<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;padding: 0;
			}
			#uploadPic input,#uploadPic button{
				padding: 5px 10px;
				font-size:20px;
				margin: 20px;
			}
			#download{
				position: fixed;
				top:120px;
				left:30px;
				background: #fff;
				color: #000;
				padding: 5px 10px;
				border-radius: 5px;
				text-decoration: none;
				font-size: 15px;
			}
			#download:active{
				background: #999;
			}
			canvas#canvas {
			    height: 80vh;
				width: auto;
			}
		</style>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form id="uploadPic">
			<input type="file" name="file">
			<button type="button">提交</button>
		</form>
		<canvas id="canvas" style="display: none;"></canvas>
		<a href="" download="" id="download" style="display: none;">下载到本地</a>
		<script>
			$(function() {
				var $canvas = document.querySelector("#canvas"),
					flag = false;
				
				//上传图片获取结果
				$("#uploadPic>button").on("click",function (e) {
					if(flag){
						alert("正在处理，请稍候！");
						return;
					} 
					var form = document.getElementById("uploadPic"),
						formData = new FormData(form);
					
					if(formData.get("file").size==0){
						alert("请选择要处理的眼底照片！")
						return;
					};
					
					flag = true;
					showLoading($("#uploadPic>button"));
					$("#canvas,#download").hide();
					//传图
					$.ajax({
						url: 'http://172.18.0.165:8080/ai/saveImage',
						type: 'POST',
						contentType:false,
						processData: false,  // 增加这一行，不处理参数
						data: formData,
						success: function (res) {
							var shapes = JSON.parse(res.slice(0,res.length-4)).shapes;
							//画图
							var img=document.createElement("img")
							previewFile(formData.get("file"),function(base64) {
								img.src = base64
								img.onload = function() {
									$canvas.width=img.width
									$canvas.height=img.height
									
									var ctx = $canvas.getContext("2d");
									
									ctx.drawImage(img,0,0);
									
									//读取json
									for (var i = 0; i < shapes.length; i++) {
										var item = shapes[i]
										drawPolygon($canvas,ctx,item.points,item.label)
									}
									
									//保存图片
									var dataURL = $canvas.toDataURL("image/jpeg");
									var $a = document.getElementById("download");
									$a.setAttribute("href",dataURL);
									$a.setAttribute("download",Date.now());
									
									//显示
									$("#canvas,#download").show()
									
									//状态还原
									flag = false;
									hideLoading($("#uploadPic>button"));
								} 
							})
						},
						error:function(e){
							//状态还原
							flag = false;
							hideLoading($("#uploadPic>button"));
							alert("服务器请求失败")
						}
					})
				})
			})
			
			//处理中定时器
			function showLoading($el) {
				var strs = ["处理中.","处理中..","处理中..."],num=0;
				window.ldTimer = setInterval(function() {
					$el.text(strs[num]);
					num++
					if(num==3) num=0;
				},500)
			}
			//关闭定时器
			function hideLoading($el){
				clearInterval(window.ldTimer)
				$el.text("提交");
			}
			
			//input选择的图片转base64
			function previewFile(file,callback) {
				var reader
				if (file) {
					// 创建流对象
					reader = new FileReader()
					reader.readAsDataURL(file)
				}
				// 捕获 转换完毕
				reader.onload = function(e) {
					// 转换后的base64返回
					callback(e.target.result)
				}
			}
			
			//画多边形
			function drawPolygon($canvas,ctx,points,label){
				//画布
				cWidth = $canvas.width,
				cHeight = $canvas.height;
				
				//清除画布
				//ctx.clearRect(0,0,cWidth,cHeight);
				//画多边形
				ctx.beginPath();
				//还原多边形
				for (var i = 0; i < points.length; i++) {
					if(i==0){
						//开始绘制
						ctx.moveTo(points[0][0] , points[0][1]);
					}else{
						ctx.lineTo(points[i][0] , points[i][1]);
					}
				}
				//闭合
				ctx.closePath();
				//根据label确定颜色
				switch (label){
					case "Microaneurysm":
						ctx.strokeStyle = "#c12975";
						break;
					case "Retinal hemorrhage":
						ctx.strokeStyle = "#8862ae";
						break;
					case "Venous beading":
						ctx.strokeStyle = "#c19bae";
						break;
					case "IRMA":
						ctx.strokeStyle = "#88d4e7";
						break;
					case "Preretinal hemorrhage":
						ctx.strokeStyle = "#16d43c";
						break;
					case "Vitreous hemorrhage":
						ctx.strokeStyle = "#8829e7";
						break;
					case "NVE":
						ctx.strokeStyle = "#1662ae";
						break;
					case "Hard exudate":
						ctx.strokeStyle = "#4f623c";
						break;
					case "Cotton wool spots":
						ctx.strokeStyle = "#169b75";
						break;
					case "Fibrous proliferation":
						ctx.strokeStyle = "#c162e7";
						break;
					case "Retina detachment":
						ctx.strokeStyle = "#594f51";
						break;
					case "Laser spot":
						ctx.strokeStyle = "#889b3c";
						break;
				}
				
				//线条粗细
				ctx.lineWidth='4';
				
				//渲染
				ctx.stroke();
			}
		</script>
	</body>
</html>
